<template>
  <div class="main">
    <div class="body">
      <el-row :gutter="20">
        <el-col :span="16"><el-button type="danger">我的模版</el-button></el-col>
        <el-col :span="8">
           <div >
            <el-input placeholder="请输入内容"  class="input-with-select">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
        </el-col>
      </el-row>
        <el-row :gutter="20" class="my-model">
          <el-col :span="4"  >
              <el-card :body-style="{ padding: '0px' }" class="item">
                <div class="ribbon ribbon-badge ribbon-danger">
                            <span class="ribbon-inner">使用中</span>
                </div>
                <img src="https://img.myxiaochengxu.cn/images/1154/2018/04/okY0FgK9R89gaixkkyCY9j9AIgzXGo.png" class="image">
                 <div class="title">122</div>
                 <div class="mask">
                  <div class="btns">
                    <el-button type="info"  size="small" round>编辑模板</el-button>
                    <el-button type="info"  size="small" round>使用模板</el-button>
                    <el-button type="info"  size="small" round>删除模板</el-button>

                    <!-- <a class="btn btn-success btn-block btn-sm" data-toggle="ajaxPost" data-confirm="确认使用此模板吗？" href="./index.php?c=company&amp;a=diytemp&amp;do=use&amp;siteid=2134">使用模板</a>
                    <a class="btn btn-default btn-block btn-sm delete" data-tid="2134">删除模板</a> -->
                  </div>
                </div>
              </el-card>
           
           
          </el-col>
          <el-col :span="4"><img class="image" src="https://img.myxiaochengxu.cn/images/1154/2018/04/okY0FgK9R89gaixkkyCY9j9AIgzXGo.png"/></el-col>
          <el-col :span="4"><img class="image" src="https://img.myxiaochengxu.cn/images/1154/2018/04/okY0FgK9R89gaixkkyCY9j9AIgzXGo.png"/></el-col>
          <el-col :span="4"><img class="image" src="https://img.myxiaochengxu.cn/images/1154/2018/04/okY0FgK9R89gaixkkyCY9j9AIgzXGo.png"/></el-col>
          <el-col :span="4"><img class="image" src="https://img.myxiaochengxu.cn/images/1154/2018/04/okY0FgK9R89gaixkkyCY9j9AIgzXGo.png"/></el-col>
          <el-col :span="4"><img class="image" src="https://img.myxiaochengxu.cn/images/1154/2018/04/okY0FgK9R89gaixkkyCY9j9AIgzXGo.png"/></el-col>
      </el-row>
    </div>
    <div class="body">
        <el-button type="success">官方模版</el-button>
        <el-row :gutter="20" class="my-model">
          <el-col :span="3" >
              <el-card :body-style="{ padding: '0px' }" class="item">
                <img src="https://img.myxiaochengxu.cn/images/1154/2018/04/okY0FgK9R89gaixkkyCY9j9AIgzXGo.png" class="image">
                 <div class="title">122</div>
                 <div class="mask">
                  <div class="btns">
                    <el-button type="info"  size="small" round>编辑模板</el-button>
                    <el-button type="info"  size="small" round>使用模板</el-button>
                    <el-button type="info"  size="small" round>删除模板</el-button>

                    <!-- <a class="btn btn-success btn-block btn-sm" data-toggle="ajaxPost" data-confirm="确认使用此模板吗？" href="./index.php?c=company&amp;a=diytemp&amp;do=use&amp;siteid=2134">使用模板</a>
                    <a class="btn btn-default btn-block btn-sm delete" data-tid="2134">删除模板</a> -->
                  </div>
                </div>
              </el-card>
           
           
          </el-col>
          <el-col :span="3"><img class="image" src="https://img.myxiaochengxu.cn/images/1154/2018/04/okY0FgK9R89gaixkkyCY9j9AIgzXGo.png"/></el-col>
          <el-col :span="3"><img class="image" src="https://img.myxiaochengxu.cn/images/1154/2018/04/okY0FgK9R89gaixkkyCY9j9AIgzXGo.png"/></el-col>
          <el-col :span="3"><img class="image" src="https://img.myxiaochengxu.cn/images/1154/2018/04/okY0FgK9R89gaixkkyCY9j9AIgzXGo.png"/></el-col>
          <el-col :span="3"><img class="image" src="https://img.myxiaochengxu.cn/images/1154/2018/04/okY0FgK9R89gaixkkyCY9j9AIgzXGo.png"/></el-col>
          <el-col :span="3"><img class="image" src="https://img.myxiaochengxu.cn/images/1154/2018/04/okY0FgK9R89gaixkkyCY9j9AIgzXGo.png"/></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import API from '@/api'
export default {
  data () {
    return {

    }
  },
  created () {
  },
  methods: {
    get
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.main {
  min-height: 100%;
  width: 100%;
  min-width: 1180px;
  overflow: hidden;
}
.body {
  padding: 20px 20px;
}
.image {
  width: 100%;
  display: block;
}
.my-model{
  margin-top: 20px;
}
.item{
  position: relative; 
}
.item .title {
  width: 100%;
    height: 40px;
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 40px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.6);
}
.item .mask {
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    text-align:center;
}   
.item .btns {
    height: auto;
    width: 60%;
    position: absolute;
    top: 30%;
    left: 50%;
    margin-left: -30%;
}
.ribbon-badge {
    top: -2px;
    left: -2px;
    overflow: hidden;
}

.ribbon {
    position: absolute;
    top: -3px;
    left: -3px;
    width: 150px;
    height: 150px;
    text-align: center;
    background-color: transparent;
}
</style>
